<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .main .balls {
        width: 450px;
        padding: 30px 10px 10px;
        margin-bottom: 20px;
        position: relative;
        border-radius: 4px;
      }

      .main .balls:after {
        content: "\20";
        clear: both;
        display: block;
        height: 0;
        overflow: hidden;
      }

      .main .balls span {
        position: absolute;
        left: 12px;
        top: 5px;
        font-size: 13px;
      }

      .main b {
        float: left;
        width: 30px;
        height: 30px;
        font-size: 15px;
        background: #fff;
        border: 1px solid;
        border-radius: 50%;
        line-height: 30px;
        text-align: center;
        margin-right: 8px;
        margin-bottom: 8px;
        cursor: pointer;
      }

      .main .red .active {
        background: #f56c6c;
        color: #fff;
      }

      .main .blue .active {
        background: #3a8ee6;
        color: #fff;
      }

      .main .red {
        background: #feeff0;
      }

      .main .red b {
        border-color: #f56c6c;
      }

      .main .blue {
        background: #ecf8ff;
      }

      .main .blue b {
        border-color: #3a8ee6;
      }
    </style>
  </head>

  <body>
    <!-- 填写标签 -->
    <div class="main">
      <div class="balls red">
        <span>红球</span>
        <div class="balls-wp">
          <b>01</b>
          <b>02</b>
          <b>03</b>
          <b>04</b>
          <b>05</b>
          <b>06</b>
          <b>07</b>
          <b>08</b>
          <b>09</b>
          <b>10</b>
          <b>11</b>
          <b>12</b>
          <b>13</b>
          <b>14</b>
          <b>15</b>
          <b>16</b>
          <b>17</b>
          <b>18</b>
          <b>19</b>
          <b>20</b>
          <b>21</b>
          <b>22</b>
          <b>23</b>
          <b>24</b>
          <b>25</b>
          <b>26</b>
          <b>27</b>
          <b>28</b>
          <b>29</b>
          <b>30</b>
          <b>31</b>
          <b>32</b>
          <b>33</b>
        </div>
      </div>
      <div class="balls blue">
        <span>蓝球</span>
        <div class="balls-wp">
          <b>01</b>
          <b>02</b>
          <b>03</b>
          <b>04</b>
          <b>05</b>
          <b>06</b>
          <b>07</b>
          <b>08</b>
          <b>09</b>
          <b>10</b>
          <b>11</b>
          <b>12</b>
          <b>13</b>
          <b>14</b>
          <b>15</b>
          <b>16</b>
        </div>
      </div>
    </div>
    <script type="text/javascript">
        /**
         * 一顿操作猛如虎，一交变成纸老虎，
         * 啥玩意还限制ES5语法，眨眼睛用的应该都是题解区用过并且通过了的语法，
         * 但确实是死活过不了，将测例在本地运行输出true，测评false，昂，找了半天没找到问题在哪，只能说牛客测评太恶心了
         * 眼尖的小友要是发现了原因所在可以私信或留言，
         * 这里我们讲解一下难点，首先是排序到底应该升序还是降序，
         * 已知我们最后要实现降序的效果，如果是forEach+insertBefore写法的话，排序的顺序为降序更方便
         * 因为刚好可以从大到小把节点一个一个插在第一个节点（动态）前面，
         * 还有个需要注意的地方呢就是，insertBefore是根据当前节点的情况来插入的，而我们使用的是querySelectorAll
         * 筛选方式，它是不会动态更新的，所以在需要动态更新的地方需要手动更新，eg.insertNewNode函数，
         * 然后就是封装方式，眨眼睛认为自己写的非常Nice🤣🤣🤣
         */
      // 填写JavaScript
      function randomFn() {
        const redBalls = document.querySelectorAll(".red>.balls-wp>b");
        const blueBalls = document.querySelectorAll(".blue>.balls-wp>b");
        const redBallsText = ".red>.balls-wp>b";
        const blueBallsText = ".blue>.balls-wp>b";
        const redBallFatherDomText = ".red>.balls-wp";
        const blueBallFatherDomText = ".blue>.balls-wp";
        const selectedRedBallNum = 6;
        const selectedBlueBallNum = 1;

        //获取指定数量随机节点
        let selectedRedArr = getRandomNode(redBalls, selectedRedBallNum);
        let selectedBlueArr = getRandomNode(blueBalls, selectedBlueBallNum);

        //降序排序
        selectedRedArr = sortByInnerHTMLDesc(selectedRedArr);
        selectedBlueArr = sortByInnerHTMLDesc(selectedBlueArr);

        //清除所有节点的active类
        clearActiveClass(redBalls);
        clearActiveClass(blueBalls);

        //插入新节点
        insertNewNode(redBallFatherDomText, redBallsText, selectedRedArr);
        insertNewNode(blueBallFatherDomText, blueBallsText, selectedBlueArr);

        return returnContent(selectedRedArr, selectedBlueArr);
      }

      //字符串化返回内容
      function returnContent(selectedRedArr, selectedBlueArr) {
        function getUnitText(Arr) {
          return Arr.map((node) => node.innerHTML)
            .reverse()
            .join(",");
        }

        return getUnitText(selectedRedArr) + "|" + getUnitText(selectedBlueArr);
      }

      //插入新节点并加上active属性
      function insertNewNode(fatherDomText, ballDomListText, newNodeArr) {
        let ballDomList = document.querySelectorAll(ballDomListText);
        let fatherDom = document.querySelector(fatherDomText);
        newNodeArr.forEach((newNode) => {
          fatherDom.insertBefore(newNode, ballDomList[0]);
          newNode.classList.add("active");
          fatherDom = document.querySelector(fatherDomText);
          ballDomList = document.querySelectorAll(ballDomListText);
        });
      }

      //清空active类
      function clearActiveClass(nodeList) {
        nodeList.forEach((node) => node.classList.remove("active"));
      }

      //以innerHTML为条件降序排序
      function sortByInnerHTMLDesc(nodeList) {
        return nodeList.sort((a, b) => b.innerHTML - a.innerHTML);
      }

      //筛选指定数量的节点
      function getRandomNode(nodeList, num) {
        let returnArr = [];
        while (returnArr.length < num) {
          let randomNum = getRandomNum(0, nodeList.length);
          if (!returnArr.includes(nodeList[randomNum])) {
            returnArr.push(nodeList[randomNum]);
          }
        }
        return returnArr;
      }

      //获取随机数(左闭右开)
      function getRandomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      }

      //测例
      function aaa() {
        var flag = false;
        try {
          var testArrSort = function (arr) {
            var flag = false;
            try {
              flag =
                arr.join(",") ===
                arr
                  .sort(function (a, b) {
                    return a - b;
                  })
                  .join(",");
            } catch (e) {}
            return flag;
          };
          var testArrRange = function (arr, min, max) {
            var flag = false;
            try {
              var error = false;
              for (var i = 0; i < arr.length; i++) {
                var item = arr[i];
                error =
                  error ||
                  !(
                    item >= min &&
                    item <= max &&
                    (item >= 10 || /^0[1-9]$/.test(item))
                  );
              }
              flag = !error;
            } catch (e) {}
            return flag;
          };
          var testCaseOne = function () {
            var error = true;
            var result = randomFn();
            if (typeof result === "string") {
              var red = (result.split("|")[0] || "").split(",");
              var blue = (result.split("|")[1] || "").split(",");
              error = !(
                red.length === 6 &&
                testArrSort(red) &&
                testArrRange(red, 1, 33) &&
                blue.length === 1 &&
                testArrSort(blue) &&
                testArrRange(blue, 1, 16)
              );
            }
            return error;
          };
          var testCase = function (n) {
            var error = false;
            for (var i = 0; i < n; i++) {
              if (testCaseOne()) {
                error = true;
                break;
              }
            }
            return error;
          };
          flag = !testCase(1000);
        } catch (e) {}
        return flag;
      }
      console.log(aaa());
    </script>
  </body>
</html>
